<template>
  <div class="app-container customer-div">
    <el-tabs v-model="activeName" @tab-click="changeTab">
      <el-tab-pane label="待处理" name="first">
        <div style="margin-top: 40px">
          <!--搜索-->
          <el-form :inline="true" :model="listQuery" size="mini" label-width="140px">
            <el-form-item label="客户编号：">
              <el-input v-model="listQuery.customerNumber"></el-input>
<!--              <el-autocomplete-->
<!--                clearable-->
<!--                class="inline-input"-->
<!--                value-key="customerName"-->
<!--                :fetch-suggestions="querySearch"-->
<!--                v-model="listQuery.keywords"-->
<!--                placeholder="请输入内容"-->
<!--                @select="handleSelectCustomerName"-->
<!--                :trigger-on-focus="false"-->
<!--              ></el-autocomplete>-->
            </el-form-item>
            <el-form-item label="订单编号：">
              <el-input v-model="listQuery.orderSn"></el-input>
            </el-form-item>
            <el-form-item label="订单日期：">
              <el-date-picker
                :default-time="['00:00:00', '23:59:59']"
                v-model="listQuery.createTime"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="业务员：">
              <el-select v-model="listQuery.userId" filterable placeholder="请选择" c>
                <el-option
                  v-for="item in userOptionList"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="是否变更：">
              <el-select v-model="listQuery.isRestart" filterable placeholder="请选择" clearable style="width:100px">
                <el-option :key="1" label="是" :value="1"></el-option>
                <el-option :key="0" label="否" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="支付状态：">
              <el-select v-model="listQuery.payState" filterable placeholder="请选择" clearable>
                <el-option :key="2" label="已结清" :value="2"></el-option>
                <el-option :key="1" label="未结清" :value="1"></el-option>
                <el-option :key="0" label="未支付" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                @click="handleSearchList()"
                type="primary">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--数据列表-->
        <div class="table-container">
          <el-table
            v-loading="listLoading"
            :data="tableData"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
              label="订单日期"
              width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.createTime}}
              </template>
            </el-table-column>
            <el-table-column  label="订单号" width="250" prop="orderSn">
              <template slot-scope="scope">
                <div>
                  {{scope.row.orderSn}}
<!--                  <img src="../../assets/images/moresu.png" style="vertical-align: middle;" v-if="scope.row.moresuSn != ''"/>-->
<!--                  <img src="../../assets/images/zhuofei2.png" v-if="scope.row.orderState == 10" style="vertical-align: middle;"/>-->
<!--                  <img src="../../assets/images/bian.png" v-if="scope.row.isRestart" style="vertical-align: middle;"/>-->
<!--                  <img src="../../assets/images/yue.png" v-if="scope.row.isTimeSure == 1" style="vertical-align: middle;"/>-->
<!--                  <img src="../../assets/images/xianshang.png" v-if="scope.row.isMoresuOnlineOrder == 1"  style="vertical-align: middle;"/>-->
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="合同截止付款时间"
              width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.expectPayTime}}
              </template>
            </el-table-column>
            <el-table-column
              label="支付状态"
              width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.payState | fiferPayState}}
              </template>
            </el-table-column>
            <el-table-column
              label="支付日期"
              width="130"
              align="center">
              <template slot-scope="scope">
                {{scope.row.payTime}}
              </template>
            </el-table-column>
            <el-table-column
              label="客户编号"
              width="300">
              <template slot-scope="scope">
              <span>
                {{scope.row.customerNumber }}
              </span>
                <!--是否有权限-->
                <div v-if="scope.row.isShowCustomerName">{{scope.row.customerName}}</div>
              </template>
            </el-table-column>

            <el-table-column
              prop="userName"
              label="业务员"
              width="100"
              align="center">
            </el-table-column>
            <el-table-column
              prop="orderGoodsNumber"
              label="合同数量"
              width="100"
              align="center">
            </el-table-column>

            <el-table-column
              label="摩叔运费"
              width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.freight}}
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="财务状态"
              width="80">
              <template slot-scope="scope">
                {{scope.row.financeState}}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="合同上传状态"
              width="120">
              <template slot-scope="scope">
                {{scope.row.hasUploadContract == 1 ? '是' : '否'}}
              </template>
            </el-table-column>
            <el-table-column
              label="合同流转状态"
              width="130"
              align="center">
              <template slot-scope="scope">
                {{scope.row.orderState}}
              </template>
            </el-table-column>
            <el-table-column
              width="150"
              fixed="right"
              label="操作"
              align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="toDetail(scope.row)">物流审核
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery.pageNum"
            :page-size="listQuery.pageSize"
            :page-sizes="[10,15,20]"
            :total="count">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已处理" name="second">
        <div style="margin-top: 40px">
          <!--搜索-->
          <el-form :inline="true" :model="listQuery2" size="mini" label-width="140px">
            <el-form-item label="客户编号：">
              <el-input v-model="listQuery2.customerNumber"></el-input>
<!--              <el-autocomplete-->
<!--                clearable-->
<!--                class="inline-input"-->
<!--                value-key="customerName"-->
<!--                :fetch-suggestions="querySearch"-->
<!--                v-model="listQuery2.keywords"-->
<!--                placeholder="请输入内容"-->
<!--                @select="handleSelectCustomerName2"-->
<!--                :trigger-on-focus="false"-->
<!--              ></el-autocomplete>-->
            </el-form-item>
            <el-form-item label="订单编号：">
              <el-input v-model="listQuery2.orderSn"></el-input>
            </el-form-item>
            <el-form-item label="订单日期：">
              <el-date-picker
                :default-time="['00:00:00', '23:59:59']"
                v-model="listQuery2.createTime"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="业务员：">
              <el-select v-model="listQuery2.userId" filterable placeholder="请选择" clearable>
                <el-option
                  v-for="item in userOptionList"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="是否变更：">
              <el-select v-model="listQuery2.isRestart" filterable placeholder="请选择" clearable style="width:100px">
                <el-option :key="1" label="是" :value="1"></el-option>
                <el-option :key="0" label="否" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="支付状态：">
              <el-select v-model="listQuery2.payState" filterable placeholder="请选择" clearable>
                <el-option :key="2" label="已结清" :value="2"></el-option>
                <el-option :key="1" label="未结清" :value="1"></el-option>
                <el-option :key="0" label="未支付" :value="0"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="调度员：">
              <el-select v-model="listQuery2.logisticsUserId" filterable placeholder="请选择" clearable>
                <el-option
                  v-for="item in userOptionList"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="运费时间：">
              <el-date-picker
                :default-time="['00:00:00', '23:59:59']"
                v-model="listQuery2.logisticsCheckTime"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button
                @click="handleSearchList2()"
                type="primary">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--数据列表-->
        <div class="table-container">
          <el-table
            v-loading="listLoading2"
            :data="tableData2"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
              label="订单日期"
              width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.orderDate}}
              </template>
            </el-table-column>
            <el-table-column  label="订单号" width="250" prop="orderSn">
              <template slot-scope="scope">
                <div>
                  {{scope.row.orderSn}}
<!--                  <img src="../../assets/images/moresu.png" style="vertical-align: middle;" v-if="scope.row.moresuSn != ''"/>-->
<!--                  <img src="../../assets/images/zhuofei2.png" v-if="scope.row.orderState == 10" style="vertical-align: middle;"/>-->
<!--                  <img src="../../assets/images/bian.png" v-if="scope.row.isRestart" style="vertical-align: middle;"/>-->
<!--                  <img src="../../assets/images/yue.png" v-if="scope.row.isTimeSure == 1" style="vertical-align: middle;"/>-->
<!--                  <img src="../../assets/images/xianshang.png" v-if="scope.row.isMoresuOnlineOrder == 1"  style="vertical-align: middle;"/>-->
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="客户编号"
              width="300">
              <template slot-scope="scope">
              <span>
                {{scope.row.customerNumber }}
              </span>
                <!--是否有权限-->
                <div v-if="scope.row.isShowCustomerName">{{scope.row.customerName}}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="addressInfo"
              label="收货地址"
              width="150"
              align="center">
            </el-table-column>
            <el-table-column
              prop="orderRemark"
              label="结算方式"
              width="150"
              align="center">
            </el-table-column>
            <el-table-column
              prop="userName"
              label="业务员"
              width="100"
              align="center">
            </el-table-column>
            <el-table-column
              prop="goodsName"
              label="合同商品"
              width="150"
              align="center">
            </el-table-column>
            <el-table-column
              prop="goodsNum"
              label="合同数量"
              width="100"
              align="center">
            </el-table-column>

            <el-table-column
              prop="inputFreight"
              label="运联含税运费"
              width="100"
              align="center">
            </el-table-column>

            <el-table-column
              prop="goodsRemark"
              label="备注"
              width="150"
              align="center">
            </el-table-column>

            <el-table-column
              prop="logisticsCheckUser"
              label="调度员"
              width="100"
              align="center">
            </el-table-column>

            <el-table-column
              prop="logisticsCheckTime"
              label="填写运费时间"
              width="150"
              align="center">
            </el-table-column>

            <el-table-column
              width="150"
              fixed="right"
              label="操作"
              align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="toDetail(scope.row)">查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery2.pageNum"
            :page-size="listQuery2.pageSize"
            :page-sizes="[10,15,20]"
            :total="count2">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="isCanseeTx" :label="'桐鑫销售待处理'+'('+ txPendingNum +')'" name="third">
        <div style="margin-top: 40px">
          <!--搜索-->
          <el-form :inline="true" :model="listQuery3" size="mini" label-width="140px">
            <!-- <el-form-item label="客户名称：">
              <el-autocomplete
                clearable
                class="inline-input"
                value-key="customerName"
                :fetch-suggestions="querySearch"
                v-model="listQuery3.keywords"
                placeholder="请输入内容"
                @select="handleSelectCustomerName3"
                :trigger-on-focus="false"
              ></el-autocomplete>
            </el-form-item> -->
            <el-form-item label="订单编号：">
              <el-input v-model="listQuery3.orderSn"></el-input>
            </el-form-item>
            <el-form-item label="订单日期：">
              <el-date-picker
                :default-time="['00:00:00', '23:59:59']"
                v-model="listQuery3.createTime"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="业务员：">
              <el-select v-model="listQuery3.userId" filterable placeholder="请选择" c>
                <el-option
                  v-for="item in userOptionList"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="是否变更：">
              <el-select v-model="listQuery3.isRestart" filterable placeholder="请选择" clearable style="width:100px">
                <el-option :key="1" label="是" :value="1"></el-option>
                <el-option :key="0" label="否" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="支付状态：">
              <el-select v-model="listQuery3.payState" filterable placeholder="请选择" clearable>
                <el-option :key="2" label="已结清" :value="2"></el-option>
                <el-option :key="1" label="未结清" :value="1"></el-option>
                <el-option :key="0" label="未支付" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                @click="handleSearchList3()"
                type="primary">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--数据列表-->
        <div class="table-container">
          <el-table
            v-loading="listLoading"
            :data="tableData"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
              label="订单日期"
              width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.createTime}}
              </template>
            </el-table-column>
            <el-table-column  label="订单号" width="250" prop="orderSn">
              <template slot-scope="scope">
                <div>
                  {{scope.row.orderSn}}
<!--                  <img src="../../assets/images/moresu.png" style="vertical-align: middle;" v-if="scope.row.moresuSn != ''"/>-->
<!--                  <img src="../../assets/images/zhuofei2.png" v-if="scope.row.orderState == 10" style="vertical-align: middle;"/>-->
<!--                  <img src="../../assets/images/bian.png" v-if="scope.row.isRestart" style="vertical-align: middle;"/>-->
<!--                  <img src="../../assets/images/yue.png" v-if="scope.row.isTimeSure == 1" style="vertical-align: middle;"/>-->
<!--                  <img src="../../assets/images/xianshang.png" v-if="scope.row.isMoresuOnlineOrder == 1"  style="vertical-align: middle;"/>-->
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="合同截止付款时间"
              width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.expectPayTime}}
              </template>
            </el-table-column>
            <el-table-column
              label="支付状态"
              width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.payState | fiferPayState}}
              </template>
            </el-table-column>
            <el-table-column
              label="支付日期"
              width="130"
              align="center">
              <template slot-scope="scope">
                {{scope.row.payTime}}
              </template>
            </el-table-column>
            <el-table-column
              label="客户编号"
              width="300">
              <template slot-scope="scope">
              <span>
                {{scope.row.customerNumber }}
              </span>
                <!--是否有权限-->
                <div v-if="scope.row.isShowCustomerName">{{scope.row.customerName}}</div>
              </template>
            </el-table-column>

            <el-table-column
              prop="userName"
              label="业务员"
              width="100"
              align="center">
            </el-table-column>
            <el-table-column
              prop="orderGoodsNumber"
              label="合同数量"
              width="100"
              align="center">
            </el-table-column>

            <el-table-column
              label="摩叔运费"
              width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.freight}}
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="财务状态"
              width="80">
              <template slot-scope="scope">
                {{scope.row.financeState}}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="合同上传状态"
              width="120">
              <template slot-scope="scope">
                {{scope.row.hasUploadContract == 1 ? '是' : '否'}}
              </template>
            </el-table-column>
            <el-table-column
              label="合同流转状态"
              width="130"
              align="center">
              <template slot-scope="scope">
                {{scope.row.orderState}}
              </template>
            </el-table-column>
            <el-table-column
              width="150"
              fixed="right"
              label="操作"
              align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="toDetail2(scope.row)">物流审核
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange3"
            @current-change="handleCurrentChange3"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery3.pageNum"
            :page-size="listQuery3.pageSize"
            :page-sizes="[10,15,20]"
            :total="count3">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="isCanseeTx" label="桐鑫销售已处理" name="fourth">
        <div style="margin-top: 40px">
          <!--搜索-->
          <el-form :inline="true" :model="listQuery4" size="mini" label-width="140px">
            <!-- <el-form-item label="客户名称：">
              <el-autocomplete
                clearable
                class="inline-input"
                value-key="customerName"
                :fetch-suggestions="querySearch"
                v-model="listQuery4.keywords"
                placeholder="请输入内容"
                @select="handleSelectCustomerName4"
                :trigger-on-focus="false"
              ></el-autocomplete>
            </el-form-item> -->
            <el-form-item label="订单编号：">
              <el-input v-model="listQuery4.orderSn"></el-input>
            </el-form-item>
            <el-form-item label="订单日期：">
              <el-date-picker
                :default-time="['00:00:00', '23:59:59']"
                v-model="listQuery4.createTime"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="业务员：">
              <el-select v-model="listQuery4.userId" filterable placeholder="请选择" clearable>
                <el-option
                  v-for="item in userOptionList"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="是否变更：">
              <el-select v-model="listQuery4.isRestart" filterable placeholder="请选择" clearable style="width:100px">
                <el-option :key="1" label="是" :value="1"></el-option>
                <el-option :key="0" label="否" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="支付状态：">
              <el-select v-model="listQuery4.payState" filterable placeholder="请选择" clearable>
                <el-option :key="2" label="已结清" :value="2"></el-option>
                <el-option :key="1" label="未结清" :value="1"></el-option>
                <el-option :key="0" label="未支付" :value="0"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="调度员：">
              <el-select v-model="listQuery4.logisticsUserId" filterable placeholder="请选择" clearable>
                <el-option
                  v-for="item in userOptionList"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="运费时间：">
              <el-date-picker
                :default-time="['00:00:00', '23:59:59']"
                v-model="listQuery4.logisticsCheckTime"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button
                @click="handleSearchList4()"
                type="primary">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--数据列表-->
        <div class="table-container">
          <el-table
            v-loading="listLoading4"
            :data="tableData4"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
              label="订单日期"
              width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.orderDate}}
              </template>
            </el-table-column>
            <el-table-column  label="订单号" width="250" prop="orderSn">
              <template slot-scope="scope">
                <div>
                  {{scope.row.orderSn}}
<!--                  <img src="../../assets/images/moresu.png" style="vertical-align: middle;" v-if="scope.row.moresuSn != ''"/>-->
<!--                  <img src="../../assets/images/zhuofei2.png" v-if="scope.row.orderState == 10" style="vertical-align: middle;"/>-->
<!--                  <img src="../../assets/images/bian.png" v-if="scope.row.isRestart" style="vertical-align: middle;"/>-->
<!--                  <img src="../../assets/images/yue.png" v-if="scope.row.isTimeSure == 1" style="vertical-align: middle;"/>-->
<!--                  <img src="../../assets/images/xianshang.png" v-if="scope.row.isMoresuOnlineOrder == 1"  style="vertical-align: middle;"/>-->
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="客户编号"
              width="300">
              <template slot-scope="scope">
              <span>
                {{scope.row.customerNumber }}
              </span>
                <!--是否有权限-->
                <div v-if="scope.row.isShowCustomerName">{{scope.row.customerName}}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="addressInfo"
              label="收货地址"
              width="150"
              align="center">
            </el-table-column>
            <el-table-column
              prop="orderRemark"
              label="结算方式"
              width="150"
              align="center">
            </el-table-column>
            <el-table-column
              prop="userName"
              label="业务员"
              width="100"
              align="center">
            </el-table-column>
            <el-table-column
              prop="goodsName"
              label="合同商品"
              width="150"
              align="center">
            </el-table-column>
            <el-table-column
              prop="goodsNum"
              label="合同数量"
              width="100"
              align="center">
            </el-table-column>

            <el-table-column
              prop="inputFreight"
              label="运联含税运费"
              width="100"
              align="center">
            </el-table-column>

            <el-table-column
              prop="goodsRemark"
              label="备注"
              width="150"
              align="center">
            </el-table-column>

            <el-table-column
              prop="logisticsCheckUser"
              label="调度员"
              width="100"
              align="center">
            </el-table-column>

            <el-table-column
              prop="logisticsCheckTime"
              label="填写运费时间"
              width="150"
              align="center">
            </el-table-column>

            <el-table-column
              width="150"
              fixed="right"
              label="操作"
              align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="toDetail2(scope.row)">查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange4"
            @current-change="handleCurrentChange4"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery4.pageNum"
            :page-size="listQuery4.pageSize"
            :page-sizes="[10,15,20]"
            :total="count4">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="isCanseeRc" :label="'日程销售待处理'+'('+ rcPendingNum +')'" name="fifth">
        <div style="margin-top: 40px">
          <!--搜索-->
          <el-form :inline="true" :model="listQuery5" size="mini" label-width="140px">
            <!-- <el-form-item label="客户名称：">
              <el-autocomplete
                clearable
                class="inline-input"
                value-key="customerName"
                :fetch-suggestions="querySearch"
                v-model="listQuery5.keywords"
                placeholder="请输入内容"
                @select="handleSelectCustomerName5"
                :trigger-on-focus="false"
              ></el-autocomplete>
            </el-form-item> -->
            <el-form-item label="订单编号：">
              <el-input v-model="listQuery5.orderSn"></el-input>
            </el-form-item>
            <el-form-item label="订单日期：">
              <el-date-picker
                :default-time="['00:00:00', '23:59:59']"
                v-model="listQuery5.createTime"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="业务员：">
              <el-select v-model="listQuery5.userId" filterable placeholder="请选择" c>
                <el-option
                  v-for="item in userOptionList"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="是否变更：">
              <el-select v-model="listQuery5.isRestart" filterable placeholder="请选择" clearable style="width:100px">
                <el-option :key="1" label="是" :value="1"></el-option>
                <el-option :key="0" label="否" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="支付状态：">
              <el-select v-model="listQuery5.payState" filterable placeholder="请选择" clearable>
                <el-option :key="2" label="已结清" :value="2"></el-option>
                <el-option :key="1" label="未结清" :value="1"></el-option>
                <el-option :key="0" label="未支付" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                @click="handleSearchList5()"
                type="primary">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--数据列表-->
        <div class="table-container">
          <el-table
            v-loading="listLoading5"
            :data="tableData5"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
              label="订单日期"
              width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.createTime}}
              </template>
            </el-table-column>
            <el-table-column  label="订单号" width="250" prop="orderSn">
              <template slot-scope="scope">
                <div>
                  {{scope.row.orderSn}}
<!--                  <img src="../../assets/images/moresu.png" style="vertical-align: middle;" v-if="scope.row.moresuSn != ''"/>-->
<!--                  <img src="../../assets/images/zhuofei2.png" v-if="scope.row.orderState == 10" style="vertical-align: middle;"/>-->
<!--                  <img src="../../assets/images/bian.png" v-if="scope.row.isRestart" style="vertical-align: middle;"/>-->
<!--                  <img src="../../assets/images/yue.png" v-if="scope.row.isTimeSure == 1" style="vertical-align: middle;"/>-->
<!--                  <img src="../../assets/images/xianshang.png" v-if="scope.row.isMoresuOnlineOrder == 1"  style="vertical-align: middle;"/>-->
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="合同截止付款时间"
              width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.expectPayTime}}
              </template>
            </el-table-column>
            <el-table-column
              label="支付状态"
              width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.payState | fiferPayState}}
              </template>
            </el-table-column>
            <el-table-column
              label="支付日期"
              width="130"
              align="center">
              <template slot-scope="scope">
                {{scope.row.payTime}}
              </template>
            </el-table-column>
            <el-table-column
              label="客户编号"
              width="300">
              <template slot-scope="scope">
              <span>
                {{scope.row.customerNumber }}
              </span>
                <!--是否有权限-->
                <div v-if="scope.row.isShowCustomerName">{{scope.row.customerName}}</div>
              </template>
            </el-table-column>

            <el-table-column
              prop="userName"
              label="业务员"
              width="100"
              align="center">
            </el-table-column>
            <el-table-column
              prop="orderGoodsNumber"
              label="合同数量"
              width="100"
              align="center">
            </el-table-column>

            <el-table-column
              label="摩叔运费"
              width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.freight}}
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="财务状态"
              width="80">
              <template slot-scope="scope">
                {{scope.row.financeState}}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="合同上传状态"
              width="120">
              <template slot-scope="scope">
                {{scope.row.hasUploadContract == 1 ? '是' : '否'}}
              </template>
            </el-table-column>
            <el-table-column
              label="合同流转状态"
              width="130"
              align="center">
              <template slot-scope="scope">
                {{scope.row.orderState}}
              </template>
            </el-table-column>
            <el-table-column
              width="150"
              fixed="right"
              label="操作"
              align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="toDetail3(scope.row)">物流审核
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange5"
            @current-change="handleCurrentChange5"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery5.pageNum"
            :page-size="listQuery5.pageSize"
            :page-sizes="[10,15,20]"
            :total="count5">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="isCanseeRc" label="日程销售已处理" name="sixth" >
        <div style="margin-top: 40px">
          <!--搜索-->
          <el-form :inline="true" :model="listQuery6" size="mini" label-width="140px">
            <!-- <el-form-item label="客户名称：">
              <el-autocomplete
                clearable
                class="inline-input"
                value-key="customerName"
                :fetch-suggestions="querySearch"
                v-model="listQuery6.keywords"
                placeholder="请输入内容"
                @select="handleSelectCustomerName6"
                :trigger-on-focus="false"
              ></el-autocomplete>
            </el-form-item> -->
            <el-form-item label="订单编号：">
              <el-input v-model="listQuery6.orderSn"></el-input>
            </el-form-item>
            <el-form-item label="订单日期：">
              <el-date-picker
                :default-time="['00:00:00', '23:59:59']"
                v-model="listQuery6.createTime"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="业务员：">
              <el-select v-model="listQuery6.userId" filterable placeholder="请选择" clearable>
                <el-option
                  v-for="item in userOptionList"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="是否变更：">
              <el-select v-model="listQuery6.isRestart" filterable placeholder="请选择" clearable style="width:100px">
                <el-option :key="1" label="是" :value="1"></el-option>
                <el-option :key="0" label="否" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="支付状态：">
              <el-select v-model="listQuery6.payState" filterable placeholder="请选择" clearable>
                <el-option :key="2" label="已结清" :value="2"></el-option>
                <el-option :key="1" label="未结清" :value="1"></el-option>
                <el-option :key="0" label="未支付" :value="0"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="调度员：">
              <el-select v-model="listQuery6.logisticsUserId" filterable placeholder="请选择" clearable>
                <el-option
                  v-for="item in userOptionList"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="运费时间：">
              <el-date-picker
                :default-time="['00:00:00', '23:59:59']"
                v-model="listQuery6.logisticsCheckTime"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button
                @click="handleSearchList6()"
                type="primary">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--数据列表-->
        <div class="table-container">
          <el-table
            v-loading="listLoading6"
            :data="tableData6"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
              label="订单日期"
              width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.orderDate}}
              </template>
            </el-table-column>
            <el-table-column  label="订单号" width="250" prop="orderSn">
              <template slot-scope="scope">
                <div>
                  {{scope.row.orderSn}}
<!--                  <img src="../../assets/images/moresu.png" style="vertical-align: middle;" v-if="scope.row.moresuSn != ''"/>-->
<!--                  <img src="../../assets/images/zhuofei2.png" v-if="scope.row.orderState == 10" style="vertical-align: middle;"/>-->
<!--                  <img src="../../assets/images/bian.png" v-if="scope.row.isRestart" style="vertical-align: middle;"/>-->
<!--                  <img src="../../assets/images/yue.png" v-if="scope.row.isTimeSure == 1" style="vertical-align: middle;"/>-->
<!--                  <img src="../../assets/images/xianshang.png" v-if="scope.row.isMoresuOnlineOrder == 1"  style="vertical-align: middle;"/>-->
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="客户编号"
              width="300">
              <template slot-scope="scope">
              <span>
                {{scope.row.customerNumber }}
              </span>
                <!--是否有权限-->
                <div v-if="scope.row.isShowCustomerName">{{scope.row.customerName}}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="addressInfo"
              label="收货地址"
              width="150"
              align="center">
            </el-table-column>
            <el-table-column
              prop="orderRemark"
              label="结算方式"
              width="150"
              align="center">
            </el-table-column>
            <el-table-column
              prop="userName"
              label="业务员"
              width="100"
              align="center">
            </el-table-column>
            <el-table-column
              prop="goodsName"
              label="合同商品"
              width="150"
              align="center">
            </el-table-column>
            <el-table-column
              prop="goodsNum"
              label="合同数量"
              width="100"
              align="center">
            </el-table-column>

            <el-table-column
              prop="inputFreight"
              label="运联含税运费"
              width="100"
              align="center">
            </el-table-column>

            <el-table-column
              prop="goodsRemark"
              label="备注"
              width="150"
              align="center">
            </el-table-column>

            <el-table-column
              prop="logisticsCheckUser"
              label="调度员"
              width="100"
              align="center">
            </el-table-column>

            <el-table-column
              prop="logisticsCheckTime"
              label="填写运费时间"
              width="150"
              align="center">
            </el-table-column>

            <el-table-column
              width="150"
              fixed="right"
              label="操作"
              align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="toDetail3(scope.row)">查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange6"
            @current-change="handleCurrentChange6"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery6.pageNum"
            :page-size="listQuery6.pageSize"
            :page-sizes="[10,15,20]"
            :total="count6">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>



  </div>
</template>
<script>
    import axios from 'axios'
    import {logisticsOrders,txLogisticsOrders,rcLogisticsOrders} from '@/api/order'
    import {getCustomerOption,getUserOption,myDeptList,txLogisticsCheckOrders,logisticsCheckOrders,rcLogisticsCheckOrders,getOrderStatList,getOrderUsersList,getKingInfo,getLgTxOrdersCount,getLgRcOrdersCount} from '@/api/partner'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import { mapGetters } from 'vuex'
    const defaultListQuery={
      pageNum: 1,
      pageSize: 10,
      keywords: '',
      createTime:null,
      orderState:15,
      orderSn:'',
      userId:null,
      isRestart:null,
      payState:null,
      tab:'unProcess',
      customerNumber:''
    };
    const defaultListQuery2={
      pageNum: 1,
      pageSize: 10,
      keywords: '',
      createTime:null,
      orderState:15,
      orderSn:'',
      userId:null,
      isRestart:null,
      payState:null,
      tab:'hasProcess',
      logisticsUserId:'',
      logisticsCheckTime:[],

    };
    const defaultListQuery3={
      pageNum: 1,
      pageSize: 10,
      keywords: '',
      createTime:null,
      orderState:15,
      orderSn:'',
      userId:null,
      isRestart:null,
      payState:null,
      tab:'unProcess'
    };

    const defaultListQuery4={
      pageNum: 1,
      pageSize: 10,
      keywords: '',
      createTime:null,
      orderState:15,
      orderSn:'',
      userId:null,
      isRestart:null,
      payState:null,
      tab:'hasProcess',
      logisticsUserId:'',
      logisticsCheckTime:[],

    };
    const defaultListQuery5={
      pageNum: 1,
      pageSize: 10,
      keywords: '',
      createTime:null,
      orderState:15,
      orderSn:'',
      userId:null,
      isRestart:null,
      payState:null,
      tab:'unProcess'
    };

    const defaultListQuery6={
      pageNum: 1,
      pageSize: 10,
      keywords: '',
      createTime:null,
      orderState:15,
      orderSn:'',
      userId:null,
      isRestart:null,
      payState:null,
      tab:'hasProcess',
      logisticsUserId:'',
      logisticsCheckTime:[],

    };

    export default {
      name: "index",
      data(){
          return {
              listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
              tableData: [],
              count: 0,
              listLoading: false,
              userOptionList:[],
              roles:store.getters.roles ? store.getters.roles : [],
              orderStateList:[],
              activeName:'first',
              txPending:0,
              listQuery2: JSON.parse(JSON.stringify(defaultListQuery2)),
              tableData2: [],
              count2: 0,
              listLoading2: false,
              txPendingNum:0,
              rcPendingNum:0,
              listQuery3: JSON.parse(JSON.stringify(defaultListQuery3)),
              tableData3: [],
              count3: 0,
              listLoading3: false,

              listQuery4: JSON.parse(JSON.stringify(defaultListQuery4)),
              tableData4: [],
              count4: 0,
              listLoading4: false,

              listQuery5: JSON.parse(JSON.stringify(defaultListQuery5)),
              tableData5: [],
              count5: 0,
              listLoading5: false,

              listQuery6: JSON.parse(JSON.stringify(defaultListQuery6)),
              tableData6: [],
              count6: 0,
              listLoading6: false,
          }
      },
      computed: {
        ...mapGetters([
          'name',
          'mobile',
          'userId'
        ]),
        // 仓库桐鑫合同查看
      isCanseeTx() {
        if(this.roles.indexOf("deliversSeeTx") != -1){
          return true
        }else{
          return false
        }
      },
      // 仓库日程合同查看
      isCanseeRc() {
        if(this.roles.indexOf("deliversSeeRc") != -1){
          return true
        }else{
          return false
        }
      },
      },
      created() {
        this.getList();
        this.getList2();
        this.getList3();
        this.getList4();
        this.getList5();
        this.getList6();
        this.getUserOptionList();
        this.getOrderStatListData();

      },
      filters: {
        formatCreateTime(time) {
          if(time){
            let date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
          }else{
            return '--'
          }
        },
        fiferPayState(val){
          if(val == 0){
            return '--'
          }else if(val == 1){
            return '未结清'
          }else if(val == 2){
            return '已结清'
          }
        },
        fiftransactionType(val){
          if(val == 'BANK_PAY'){
            return '银行汇款'
          }else if(val == 'COD_PAY'){
            return '货到付款'
          }else if(val == 'DEPOSIT_PAY'){
            return '定金'
          }else{
            return '其它'
          }
        },
        fifIntroducerType(val){
          if(val == 1){
            return '外部人员'
          }else if(val == 2){
            return '内部人员'
          }
        },
      },
      methods:{
        changeTab(tab){
          if(tab.name == 'first'){
            this.getList()
          }else if(tab.name == 'second'){
            this.getList2()
          }else if(tab.name == 'third'){
            this.getList3()
          }else if(tab.name == 'fourth'){
            this.getList4()
          }else if(tab.name == 'fifth'){
            this.getList5()
          }else {this.getList6()}
        },


        //获取订单状态列表
        getOrderStatListData(){
          getOrderStatList().then((res)=>{
            this.orderStateList = res;
          })
        },

          //获取员工下拉选项
          getUserOptionList(){
            getOrderUsersList().then((res)=>{
                  this.userOptionList = res;
              })
          },

          //选择员工名称
          handleSelectUserName(key,item){
              this.listQuery[key] = item.userId;
          },


          //客户名称输入匹配
          querySearch(queryString, cb){
              getCustomerOption({keywords:queryString}).then((res)=>{
                  cb(res);
              })
          },


          //选择客户名称
          handleSelectCustomerName(item){
              this.listQuery.keywords = item.customerName
          },

        //选择客户名称2
        handleSelectCustomerName2(item){
          this.listQuery2.keywords = item.customerName
        },

         //选择客户名称3
         handleSelectCustomerName3(item){
          this.listQuery3.keywords = item.customerName
        },

         //选择客户名称4
         handleSelectCustomerName4(item){
          this.listQuery4.keywords = item.customerName
        },

         //选择客户名称5
         handleSelectCustomerName5(item){
          this.listQuery5.keywords = item.customerName
        },

         //选择客户名称6
         handleSelectCustomerName6(item){
          this.listQuery6.keywords = item.customerName
        },

        handleSizeChange(val){
          this.listQuery.pageNum = 1;
          this.listQuery.pageSize = val;
          this.getList();
        },
        handleCurrentChange(val){
          this.listQuery.pageNum = val;
          this.getList();
        },

        handleSearchList(){
          this.listQuery.pageNum = 1;
          this.getList();
        },
        getOrdersCountSon() {
          getLgTxOrdersCount().then(res=>{
            this.txPendingNum = res
          })
          getLgRcOrdersCount().then(res=>{
            this.rcPendingNum = res
          })
        },
        //获取订单列表
        getList() {
          this.listLoading = true;
          let listQuery = JSON.parse(JSON.stringify(this.listQuery));
          this.getOrdersCountSon()
          logisticsOrders(listQuery).then(response => {
            this.tableData = response.list;
            this.count = response.count;
            this.listLoading = false;
          }).catch(()=>{
            this.listLoading = false;
          });
        },

        handleSizeChange2(val){
          this.listQuery2.pageNum = 1;
          this.listQuery2.pageSize = val;
          this.getList2();
        },
        handleCurrentChange2(val){
          this.listQuery2.pageNum = val;
          this.getList2();
        },

        handleSearchList2(){
          this.listQuery2.pageNum = 1;
          this.getList2();
        },

        //获取订单列表
        getList2() {
          this.listLoading2 = true;
          let listQuery2 = JSON.parse(JSON.stringify(this.listQuery2));
          this.getOrdersCountSon()
          logisticsCheckOrders(listQuery2).then(response => {
            this.tableData2 = response.list;
            this.count2 = response.count;
            this.listLoading2 = false;
          }).catch(()=>{
            this.listLoading2 = false;
          });
        },

        handleSizeChange3(val){
          this.listQuery.pageNum = 1;
          this.listQuery.pageSize = val;
          this.getList3();
        },
        handleCurrentChange3(val){
          this.listQuery.pageNum = val;
          this.getList3();
        },

        handleSearchList3(){
          this.listQuery.pageNum = 1;
          this.getList3();
        },

        //获取桐鑫订单列表
        getList3() {
          this.listLoading3 = true;
          let listQuery3 = JSON.parse(JSON.stringify(this.listQuery3));
          this.getOrdersCountSon()
          txLogisticsOrders(listQuery3).then(response => {
            this.tableData3 = response.list;
            this.count3 = response.count;
            this.listLoading3 = false;
          }).catch(()=>{
            this.listLoading3 = false;
          });
        },

        handleSizeChange4(val){
          this.listQuery4.pageNum = 1;
          this.listQuery4.pageSize = val;
          this.getList4();
        },
        handleCurrentChange4(val){
          this.listQuery4.pageNum = val;
          this.getList4();
        },

        handleSearchList4(){
          this.listQuery4.pageNum = 1;
          this.getList4();
        },

        //获取订单列表
        getList4() {
          this.listLoading4 = true;
          let listQuery4 = JSON.parse(JSON.stringify(this.listQuery4));
          this.getOrdersCountSon()
          txLogisticsCheckOrders(listQuery4).then(response => {
            this.tableData4 = response.list;
            this.count4 = response.count;
            this.listLoading4 = false;
          }).catch(()=>{
            this.listLoading4 = false;
          });
        },

        handleSizeChange5(val){
          this.listQuery.pageNum = 1;
          this.listQuery.pageSize = val;
          this.getList5();
        },
        handleCurrentChange5(val){
          this.listQuery.pageNum = val;
          this.getList5();
        },

        handleSearchList5(){
          this.listQuery.pageNum = 1;
          this.getList5();
        },

        getList5() {
          this.listLoading5 = true;
          let listQuery5 = JSON.parse(JSON.stringify(this.listQuery5));
          this.getOrdersCountSon()
          rcLogisticsOrders(listQuery5).then(response => {
            this.tableData5 = response.list;
            this.count5 = response.count;
            this.listLoading5 = false;
          }).catch(()=>{
            this.listLoading5 = false;
          });
        },

        handleSizeChange6(val){
          this.listQuery6.pageNum = 1;
          this.listQuery6.pageSize = val;
          this.getList6();
        },
        handleCurrentChange6(val){
          this.listQuery6.pageNum = val;
          this.getList6();
        },

        handleSearchList6(){
          this.listQuery6.pageNum = 1;
          this.getList6();
        },

        //获取订单列表
        getList6() {
          this.listLoading6 = true;
          let listQuery6 = JSON.parse(JSON.stringify(this.listQuery6));
          this.getOrdersCountSon()
          rcLogisticsCheckOrders(listQuery6).then(response => {
            this.tableData6 = response.list;
            this.count6 = response.count;
            this.listLoading6 = false;
          }).catch(()=>{
            this.listLoading6 = false;
          });
        },

        //去详情页
        toDetail(item){
          let routeData = this.$router.resolve({name:'deliverOrderInfo',query:{id:item.orderId}});
          window.open(routeData.href);
        },
        //去桐鑫详情页
        toDetail2(item){
          let routeData = this.$router.resolve({name:'deliverTxOrderInfo',query:{id:item.orderId}});
          window.open(routeData.href);
        },
        //去日程详情页
        toDetail3(item){
          let routeData = this.$router.resolve({name:'deliverRcOrderInfo',query:{id:item.orderId}});
          window.open(routeData.href);
        },
      },
    }
</script>

<style scoped lang="scss">
  .upload-div{
    text-align: center;
    position:relative;
    #upload{

      opacity: 0;
      position: absolute;
      z-index: 1;
      width:154px;
      height:40px
    }
  }
  .title-tab{
    border-radius: 8px;
    background: #eee;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
    padding: 0 5px;
    color: #666;
  }
</style>
